﻿<%@ Page Title="Title" Language="C#" Inherits="System.Web.Mvc.ViewPage<Uber.Core.Model.Post>"
    MasterPageFile="~/Views/Shared/Site.Master" %>

<asp:Content runat="server" ID="Title" ContentPlaceHolderID="TitleContent">
</asp:Content>
<asp:Content runat="server" ID="Main" ContentPlaceHolderID="MainContent">
    <script type="text/javascript">
        $(function () {
            me.init();
            $('.question').each(function () {
                $(this).find('.pb').html(me.parse($(this).find('.body').val()));
            });
            $('.comment').each(function () {
                $(this).find('.cb').html(me.parse($(this).find('.cbody').val()));
            });

            prettyPrint();
            $('.toolbox > button').live('click', ab);
            $('textarea').live('keydown', function (e) { me.insertTab(this, e); });
            $('textarea').live('keyup', function () {
                var o = $(this).closest('.editor');
                rr(o);
            });

            $('.btn-cancel').live('click', function () {
                var o = $(this).closest('.question');

                o.find('.title').val(o.find('.btitle').val());
                $('#q').html(o.find('.btitle').val());
                o.find('.body').val(o.find('.bbody').val());
                o.find('.editor').hide();
                o.find('.pb').show();
            });

            $('.btn-save').live('click', function () {
                var o = $(this).closest('.question');
                var err = [];
                var tt = o.find('.title'); var t = tt.val();
                var b = o.find('.body').val();
                var p = "answer";
                if (tt.length > 0) p = "question";
                if (tt.length > 0) if (t.length < 15 || t.length > 150) err.push("title length must be between 15 and 150 characters long");
                if (b.length > 30000) err.push(p + " body length must be less than 30000 characters long, you've written " + b.length);
                if (b.length < 30) err.push("your " + p + " is to short, please give more details");
                var l = o.find('.errlist');
                if (err.length != 0) {
                    l.empty();
                    for (var i in err) {
                        l.append('<li>' + err[i] + '</li>');
                    }
                } else {
                    l.empty();
                    var d = {};
                    if (t) d.title = t;
                    d.body = b;
                    d.id = o.data('val');
                    d.parentId = $('#qid').val();
                    d.__RequestVerificationToken = $('[name="__RequestVerificationToken"]').val();

                    $.post('<%=Url.Action("EditPost") %>', d, function (r) {
                        if (r.m == 'e') l.append('<li>' + r.m + '</li>');
                        if (r.m == 'o') {
                            o.find('.btitle').val(o.find('.title').val());
                            o.find('.bbody').val(o.find('.body').val());
                            o.find('.editor').hide();
                            o.find('.pb').html(me.parse(o.find('.body').val()));
                            o.find('.pb').show();
                            prettyPrint();
                            o.css('background-color', 'greenyellow');
                            o.animate({ backgroundColor: 'white' }, 1000);
                        }
                        if (r.m == 'n') {
                            $('#answers').append('<li>' + r.c + '<\li>');

                            var n = $('#answers .question:last');
                            n.find('.body').val(b);
                            n.find('.pb').html(me.parse(n.find('.body').val()));
                            n.css('background-color', 'greenyellow');
                            n.animate({ backgroundColor: 'white' }, 1000);
                            $('.newanswer').hide();
                            prettyPrint();
                        }
                    });
                }
            });

            $('.graylink').live('click', function (e) {
                e.preventDefault();
                $(this).hide();
                $(this).closest('.question').find('.commentbox').show();
            });

            $('.cancelcomment').live('click', function () {
                var o = $(this).closest('.question');
                o.find('.commentbox').hide();
                o.find('.graylink').show();
            });

            $('.addcomment').live('click', function () {

                var o = $(this).closest('.question');
                var c = o.find('.newcomment').val();
                if (c.length < 15 || c.length > 600) o.find('.errcomm').html('comment lenght must be between 15 and 600, you wrote ' + c.length);
                else {
                    o.find('.errcomm').html('');
                    var d = {};
                    d.id = o.data('val');
                    d.body = c;
                    d.__RequestVerificationToken = $('[name="__RequestVerificationToken"]').val();
                    $.post('<%=Url.Action("AddComment") %>', d, function (r) {
                        if (r.m == 'o') {
                            o.find('.comments').append(r.o);
                            o.find('.newcomment').val('');
                            o.find('.commentbox').hide();
                            o.find('.graylink').show();
                            var n = o.find('.comments .comment:last');
                            $(n).find('.cb').html(me.parse($(n).find('.cbody').val()));
                        } else
                            o.find('.errcomm').html('sorry an error has occured');
                    });
                }
            });

            $('.cedit').live('click', function (e) {
                e.preventDefault();
                var o = $(this).closest('.comment');
                o.find(".cb").hide();
                o.find(".ceditor").show();
                o.find(".bcbody").val(o.find(".cbody").val());
            });

            $('.btn-ccancel').live('click', function (e) {
                e.preventDefault();
                var o = $(this).closest('.comment');
                o.find(".cbody").val(o.find(".bcbody").val());
                o.find(".cb").show();
                o.find(".ceditor").hide();
            });

            $('.btn-csave').live('click', function (e) {
                e.preventDefault();
                var o = $(this).closest('.comment');
                var c = o.find('.cbody').val();
                if (c.length < 15 || c.length > 600) o.find('.cederr').html('comment lenght must be between 15 and 600, you wrote ' + c.length);
                else {
                    o.find('.cederr').html('');
                    var d = {};
                    d.id = o.data('val');
                    d.body = c;
                    d.__RequestVerificationToken = $('[name="__RequestVerificationToken"]').val();
                    $.post('<%=Url.Action("EditComment") %>', d, function (r) {
                        if (r.m == "o") {
                            o.find('.ceditor').hide();
                            o.find('.cbody').val(c);
                            o.find('.bcbody').val(c);
                            o.find('.cb').html(me.parse(c)).show();

                        } else alert("sorry, an unexpected error has occurred");
                    });
                }
            });

            $('.cdell').live('click', function (e) {
                e.preventDefault();
                var o = $(this).closest('.comment');
                o.css('background-color', 'yellow');
                if (confirm("really delete this comment ?")) {
                    var d = {};
                    d.id = o.data('val');
                    d.__RequestVerificationToken = $('[name="__RequestVerificationToken"]').val();
                    $.post('<%=Url.Action("DeleteComment") %>', d, function (r) {
                        if (r.m == "o") {
                            o.remove();
                        }
                        if (r.m == "e") {
                            alert('sorry, an unexpected error has occurred');
                        }
                    });

                }
                else o.css('background-color', '');
            });

            $('.dell').live('click', function (e) {
                e.preventDefault();
                $('#dct').val('');
                var o = $(this).closest('.question');
                o.animate({ backgroundColor: 'yellow' }, 2000);
                $('#deld')
                    .dialog({
                        width: 700, height: 250, modal: true,
                        buttons: {
                            Cancel: function () { o.animate({ backgroundColor: 'white' }, 1000); $(this).dialog('close'); },
                            Yes: function () {
                                if ($('#dct').val() != "DELETE") alert("you havent wrote the Word DELETE in the textbox");
                                else {
                                    var dial = $(this);
                                    var d = {};
                                    d.id = o.data('val');
                                    d.__RequestVerificationToken = $('[name="__RequestVerificationToken"]').val();
                                    $.post('<%=Url.Action("DeletePost") %>', d, function (r) {

                                        if (r.m == "o") {
                                            o.css('background-color', 'red');
                                            o.find('a').remove();
                                            o.fadeOut('slow');
                                        }
                                        if (r.m == "v") alert(r.c);
                                        if (r.m == "e") alert('sorry, an unexpected error has occurred');
                                        dial.dialog('close');
                                    });
                                }
                            }
                        }
                    });
            });

        });

        function rr(e) {
            e.find('.preview').html(me.parse(e.find('textarea').val()));
        }

        function edit(q) {
            var o = $('#q' + q);
            o.find('.editor').show();
            o.find('.pb').hide();

            o.find('.btitle').val(o.find('.title').val());
            o.find('.bbody').val(o.find('.body').val());

            o.find('.title')
                .keydown(function () { $('#q').html($(this).val()); })
                .change(function () { $(this).keydown(); });

            rr(o);
        }

        function ab() {
            var e = $(this).closest('.editor');
            me.formatText(e.find('textarea')[0], $(this).data('v'));
            rr(e);
        }
    </script>
    <div id="deld" title="confirm deletion" class="hid">are you sure you want to delete this ? <br/> to confirm this write the word DELETE here: <input type="text" id="dct"/> and click yes</div>
    <input type="hidden" id='qid' value="<%=Model.Id %>" />
    <%=Html.AntiForgeryToken() %>
    <div id="ask">
    <a  href="<%=Url.Action("AskQuestion") %>">Ask Question</a>
    </div>
    <h1>
        <a href='<%=Url.Action("Question") %>' id="q">
            <%:Model.Title %></a>
    </h1>
    <% Html.RenderPartial("q", Model); %>
    <h2>
        Answers</h2>
    <ul id="answers">
        <%if (Model.Posts != null) foreach (var p in Model.Posts)
              {%>
        <li>
            <% Html.RenderPartial("q", p); %>
        </li>
        <%} %>
    </ul>
    <%if (Request.IsAuthenticated)
      {%>
      <div class="newanswer">
    <h2>
        Your Answer</h2>
    <div class="question ext" data-val="0">
        <div class="editor">
            <ul class="errlist">
            </ul>
            <div class="efield" style="margin: 5px;">
                <div class="toolbox">
                    <button type="button" data-v='*'>
                        B</button>
                    <button type="button" data-v='_'>
                        I</button>
                    <button type="button" data-v='code'>
                        {code}</button>
                </div>
                <textarea class="body" rows="10" cols="20" style="width: 100%;"></textarea>
            </div>
            <div class="efield" style="margin: 5px;">
                <input type="button" value="Post Your Answer" class="grbtn btn-save" />
            </div>
            <div style='border: 1px dashed gainsboro;' class='preview'>
            </div>
        </div>
    </div>
    <%}
      else
      {%>
    <h1>
        please Log In to leave an answer
    </h1>
    <%} %>
    </div>
</asp:Content>
